<script setup lang="ts">
  import { ref } from 'vue';
  import { usePaginationTable } from '@/hooks/arco/usePaginationTable';
  import { pageQueryElderByBranch } from '@/api/file-management/file';
  import { queryList } from '@/api/organization/nursing-home';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';

  const emits = defineEmits(['change']);

  const currentElder = ref(1);

  // const elderName = ref('');

  const currentBranch = ref('');

  const onElderlyItemClick = (item: any) => {
    currentElder.value = item;
    emits('change', item);
  };

  const page = usePaginationTable({
    immediate: false,
    pageSize: 7,
    getQueryParams() {
      return {
        branchId: currentBranch.value,
      };
    },
    apiFun: pageQueryElderByBranch,
    onSuccess(data) {
      if (data.length > 0) {
        onElderlyItemClick(data[0]);
      } else {
        onElderlyItemClick(null);
      }
    },
  });

  const branchSelect = useSelectOption({
    apiFun: queryList,
    fieldNames: {
      label: 'name',
      value: 'id',
    },
    onSuccess(data) {
      if (data.length > 0) {
        currentBranch.value = data[0].value;
        page.reload();
      }
    },
    onChange() {
      page.reload();
    },
  });
</script>

<template>
  <div class="elderly-card-wrapper flex flex-col gap-5">
    <div class="w-full">
      <a-select
        v-model="currentBranch"
        class="branch-select"
        size="large"
        v-bind="branchSelect.bindProps"
      />
    </div>

    <div class="flex-1 w-full overflow-hidden">
      <list-view v-slot="{ data }" class="w-full" v-bind="page.bindProps">
        <div class="flex flex-col elder-list gap-2">
          <div
            v-for="(item, index) in data"
            :key="index"
            class="elderly-card-out"
            :class="[
              {
                active: item == currentElder,
              },
              item.gender === 1 ? 'man' : 'woman',
            ]"
            @click="onElderlyItemClick(item)"
          >
            <div class="elderly-card items-center gap-5">
              <img
                class="elderly-profile"
                src="@/assets/images/profile.jpg"
                alt="长者头像"
              />
              <span class="name">{{ item.elderName }}</span>
              <span class="room-no">{{ item.roomNo }} - {{ item.bedNo }}</span>
            </div>
          </div>
        </div>
      </list-view>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .elderly-card-wrapper {
    height: 100%;
    width: 300px;

    :deep(.branch-select.arco-select-view-single) {
      background-color: rgb(var(--primary-6));
      color: var(--color-white);
      font-weight: bold;
      padding: 2px 14px;

      .arco-select-view-suffix {
        color: var(--color-white);
      }
    }

    .elder-list {
      width: 100%;
    }

    .elderly-card-out {
      border-left: 4px solid transparent;
      padding: 0 10px;
      color: #333444;

      .elderly-card {
        padding: 10px 0;
        display: flex;
        width: 100%;
        font-size: 14px;
        cursor: pointer;
        // border-bottom: 1px solid #e5e5e5;

        .elderly-profile {
          width: 46px;
          height: 46px;
          border-radius: 50%;
          background-color: #e5e5e5;
        }

        .name {
          font-size: 16px;
          line-height: 1;
        }

        .room-no {
          font-size: 14px;
          line-height: 1;
        }
      }
    }
    .elderly-card-out.active {
      border-left: 4px solid;
      color: #333333;

      .name {
        font-weight: bold;
      }
    }

    .man {
      background-color: #e8f3ff;
    }

    .man.active {
      border-color: rgb(var(--primary-6));
    }

    .woman {
      background-color: #ffe8f3;
    }

    .woman.active {
      border-color: rgb(var(--primary-6));
    }

    .elderly-card-out:last-child {
      .elderly-card {
        border-bottom: none;
      }
    }
  }
</style>
